<template>
    <div class="jianzhan-content">
        <crumb name="档案/Document"></crumb>
        <div class="content">
            <div class="tree">
                <el-tree
                        @node-click="nodeClick"
                        check-on-click-node
                        :data="customerList"
                        :props="props"
                        :load="loadNode"
                        lazy
                >
                </el-tree>

            </div>
            <div class="wo-content">
                <div class="top">
                    <div class="part">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>{{$t('document.equipmentInfomation')}}</span>
                            </div>
                            <flex :label="$t('document.project')" :value="deviceInfo.project"></flex>
                            <flex :label="$t('document.arriveDate')" :value="deviceInfo.arrieveDateStr"></flex>
                            <flex :label="$t('document.brand')" :value="deviceInfo.brand"></flex>
                            <flex :label="$t('document.contract')" :value="deviceInfo.contract"></flex>
                            <flex :label="$t('document.engine')" :value="deviceInfo.engine"></flex>
                            <flex :label="$t('document.equipmentType')" :value="deviceInfo.equipmentType"></flex>
                            <flex :label="$t('document.model')" :value="deviceInfo.model"></flex>
                            <flex :label="$t('document.plateNumber')" :value="deviceInfo.plateNum"></flex>
                            <flex :label="$t('document.sn')" label="Sn" :value="deviceInfo.sn"></flex>
                        </el-card>
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>停机率</span>
                            </div>
                            <flex label="停机率" :value="0"></flex>
                        </el-card>
                    </div>
                    <div class="part">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>{{$t('document.serviceReport')}}</span>
                            </div>
                            <div class="search-content">
                                <div class="flex">
                                    <el-date-picker size="mini"
                                                    class="f1"
                                                    v-model="startTime"
                                                    type="date"
                                                    value-format="yyyy-MM-dd"
                                                    placeholder="Start Time"></el-date-picker>
                                    <el-date-picker size="mini"
                                                    class="f1"
                                                    v-model="endTime"
                                                    type="date"
                                                    value-format="yyyy-MM-dd"
                                                    placeholder="End Time"></el-date-picker>
                                    <el-button type="primary" class="f1" size="mini">Go</el-button>
                                </div>
                                <div class="flex">
                                    <el-button v-for="item in btnList"
                                               :key="item.t"
                                               @click="type=item.t"
                                               :class="type === item.t ? 'active':''"
                                               type="text" class="f1">{{item.v}}
                                    </el-button>
                                </div>
                            </div>
                            <flex label="服务费用" :value="sumInfo.total_service_price"></flex>
                            <flex label="配件费用" :value="sumInfo.spare_parts_price"></flex>
                            <flex label="实际工作实际" :value="sumInfo.total_calculation_real_time"></flex>
                            <flex label="理论工作实际" :value="sumInfo.total_point_code_time"></flex>
                            <el-table
                                    :data="sumInfo.category_leader_board"
                                    stripe
                                    border
                                    style="width: 100%">
                                <el-table-column
                                        prop="category"
                                        label="Category"
                                        >
                                </el-table-column>
                                <el-table-column
                                        prop="totalServiceHours"
                                        label="Work Hours"
                                       >
                                </el-table-column>
                                <el-table-column
                                        prop="totalServiceNumber"
                                        label="Times">
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </div>

                </div>
                <div class="bottom">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>{{$t('document.history')}}</span>
                        </div>
                        <el-table
                                :data="woDetail"
                                @expand-change="expandChange"
                                row-key="id"
                                border
                                style="width: 100%">
                            <el-table-column type="expand" :label="$t('document.problem')" width="80">
                                <template slot-scope="quest">
                                    <woDetailExpand :quest="quest.row"> </woDetailExpand>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="workingNumber"
                                    :label="$t('document.woNo')"
                                    >
                            </el-table-column>
                            <el-table-column
                                    prop="startDate"
                                    label="开始时间"
                                   >
                            </el-table-column>
                            <el-table-column
                                    prop="endDate"
                                    label="结束时间">
                            </el-table-column>
                            <el-table-column
                                    prop="hmKm"
                                    label="公里数">
                            </el-table-column>
                            <el-table-column
                                    prop="serviceType"
                                    label="服务类型">
                            </el-table-column>
                            <el-table-column
                                    prop="servicePrice"
                                    label="服务费">
                            </el-table-column>
                            <el-table-column
                                    prop="partsPrice"
                                    label="配件费">
                            </el-table-column>
                        </el-table>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import crumb from '../../components/common/crumb'
    import flex from '../../components/common/flexText'
    import woDetailExpand from '../../components/service/woDetailExpand'
    import {
        getEquipmentCustomerList,
        getEquipmentByCustomer,
        getWoByEquipment,
        getDeviceInfo,
        wokingOrderInvoice, getWorkDetail
    } from "../../api/service";
    import {ERROR_OK} from "../../util/config";
    import moment from "moment";

    export default {
        name: "backup",
        components: {crumb, flex,woDetailExpand},
        data() {
            return {
                customerList: [],
                woDetail: [],
                deviceInfo: {},
                sumInfo: {},
                btnList: [
                    {
                        t: 1,
                        v: '日'
                    },
                    {
                        t: 2,
                        v: '周'
                    },
                    {
                        t: 3,
                        v: '月'
                    },
                    {
                        t: 4,
                        v: '季度'
                    },
                    {
                        t: 5,
                        v: '年'
                    }
                ],
                props: {
                    label: 'name',
                    children: 'children',
                    isLeaf: 'leaf'
                },
                plateNum: '',
                type: 1,
                specifiedDate: moment().format('YYYY-MM-DD'),
                weekNumber: moment().week(),
                year: moment().year(),
                month: moment().month() + 1,
                quarter: moment().quarter(),
                startTime: '',
                endTime: '',
            }
        },
        created() {
            this.getCustomerList()
        },
        methods: {
            async expandChange(row){
                if(row.partList){return}
                const {status, data} = await getWorkDetail(row.id);
                if(status === ERROR_OK) {
                    this.$set(row,'jobInformationVoList',data.jobInformationVoList)
                    this.$set(row,'serviceChargeList',data.serviceChargeList)
                    this.$set(row,'suggestionVoList',data.suggestionVoList)
                    this.$set(row,'causeOfProblem',data.causeOfProblem)
                    this.$set(row,'workingPlaceDesc',data.workingPlaceDesc)
                    this.$set(row,'problemVoList',data.problemVoList)
                    if(data.partsList) {
                        const partList = data.partsList.map(part => {
                            return {
                                ...part,
                                number: part.quantity,
                                quantity: part.sparePartsStock,
                            }
                        });
                        this.$set(row,'partList',partList)
                    }
                }
            },
            async getWoSumInfo(plateNum) {
                if (this.type === 1) {
                    const {status, data, msg} = await wokingOrderInvoice({
                        plateNum: plateNum,
                        specifiedDate: this.specifiedDate
                    });
                    if (status === ERROR_OK) {
                        this.sumInfo = data;
                    } else {
                        this.sumInfo = {};
                        this.$message.error(msg)
                    }
                }
                if (this.type === 2) {
                    const {status, data, msg} = await wokingOrderInvoice({
                        plateNum: plateNum,
                        weekNumber: this.weekNumber
                    });
                    if (status === ERROR_OK) {
                        this.sumInfo = data;
                    } else {
                        this.sumInfo = {};
                        this.$message.error(msg)
                    }

                }
                if (this.type === 3) {
                    const {status, data, msg} = await wokingOrderInvoice({plateNum: plateNum, month: this.month});
                    if (status === ERROR_OK) {
                        this.sumInfo = data;
                    } else {
                        this.sumInfo = {};
                        this.$message.error(msg)
                    }
                }
                if (this.type === 4) {
                    const {status, data, msg} = await wokingOrderInvoice({plateNum: plateNum, quarter: this.quarter});
                    if (status === ERROR_OK) {
                        this.sumInfo = data;
                    } else {
                        this.sumInfo = {};
                        this.$message.error(msg)
                    }
                }
                if (this.type === 5) {
                    const {status, data, msg} = await wokingOrderInvoice({plateNum: plateNum, year: this.year});
                    if (status === ERROR_OK) {
                        this.sumInfo = data;
                    } else {
                        this.sumInfo = {};
                        this.$message.error(msg)
                    }
                }
            },
            async nodeClick(obj, node) {
                if (node.level === 1) {
                    return
                }
                if (this.plateNum === obj.name) return;
                this.plateNum = obj.name;
                this.getWodetail(obj.name);
                this.getDeviceInfo(obj.name);
                this.getWoSumInfo(obj.name)
            },
            async getDeviceInfo(name) {
                const {status, data} = await getDeviceInfo({plateNum: name});
                if (status === ERROR_OK) {
                    this.deviceInfo = data
                }
            },
            async getWodetail(name) {
                const {status, data, msg} = await getWoByEquipment(name);
                if (status === ERROR_OK) {
                    this.woDetail = data
                } else {
                    this.woDetail = [];
                    this.$message.error(msg);
                }
            },
            async loadNode(node, resolve) {
                if (node.level === 0) {
                    return resolve([]);
                }
                const {status, data} = await getEquipmentByCustomer(node.label);
                if (status === ERROR_OK) {
                    resolve(data.map(item => ({name: item.plateNum, leaf: true})))
                }
            },
            async getCustomerList() {
                const {status, data} = await getEquipmentCustomerList();
                if (status === ERROR_OK) {
                    this.customerList = data.map(item => ({name: item}));
                } else {
                    this.$message.error('No Document File');
                }
            }
        },
        watch: {
            type() {
                this.getWoSumInfo(this.plateNum)
            }
        }
    }
</script>

<style scoped lang="scss">
    .tree {
        display: inline-block;
        height: 600px;
        overflow: scroll;
        vertical-align: top;
        width: 27%;
        margin-top: 20px;
        border-right: 1px solid #ddd;
    }

    .wo-content {
        margin-left: 1%;
        margin-top: 20px;
        display: inline-block;
        vertical-align: top;
        width: 70%;
        .top {
            text-align: left;
            .part {
                width: 50%;
                display: inline-block;
                vertical-align: top;
            }
        }
        .bottom {
            text-align: left;
            margin-top: 10px;
        }
    }

    .flex {
        display: flex;
        .f1 {
            flex: 1;
            &.active {
                color: lightgreen;
            }
        }
    }
</style>

